<template>
  <!-- <view class="flex m-v36"> -->
  <view :id="viewId" class="flex m-t18 filter-view" :class="[{ border: popupState.visible }]">
    <view class="flex-1 flex-sb" @click="togglePopup('area')">
      <text class="text-500-326" :class="[isArea && popupState.open ? 'text-500-526' : 'text-500-326']">工作区域</text>
      <image
        v-if="isArea && popupState.open"
        class="square-30"
        src="@/static/images/public/arrow-4.png"
        mode="" />
      <image
        v-else
        class="square-30"
        src="@/static/images/public/arrow-2.png"
        mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('industry')">
      <text class="text-500-326" :class="[isIndustry && popupState.open ? 'text-500-526' : 'text-500-326']">全部行业</text>
      <image
        v-if="isIndustry && popupState.open"
        class="square-30"
        src="@/static/images/public/arrow-4.png"
        mode="" />
      <image
        v-else
        class="square-30"
        src="@/static/images/public/arrow-2.png"
        mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('salary')">
      <text class="text-500-326" :class="[isSalary && popupState.open ? 'text-500-526' : 'text-500-326']">薪资范围</text>
      <image
        v-if="isSalary && popupState.open"
        class="square-30"
        src="@/static/images/public/arrow-4.png"
        mode="" />
      <image
        v-else
        class="square-30"
        src="@/static/images/public/arrow-2.png"
        mode="" />
    </view>
    <view class="line" />
    <view class="flex-1 flex-sb" @click="togglePopup('more')">
      <text class="text-500-326" :class="[isMore && popupState.open ? 'text-500-526' : 'text-500-326']">更多筛选</text>
      <image
        v-if="isMore && popupState.open"
        class="square-30"
        src="@/static/images/public/arrow-4.png"
        mode="" />
      <image
        v-else
        class="square-30"
        src="@/static/images/public/arrow-2.png"
        mode="" />
    </view>

    <view v-show="popupState.visible" class="filter-popup" :style="[{ top: `${offsetTop}px` }]">
      <view class="filter-popup__mask" :class="[{ open: popupState.open }]" @click="closePopup" />
      <view class="filter-popup__body" :class="[{ open: popupState.open }]">
        <AreaFilter v-if="isArea" />
        <IndustryFilter v-if="isIndustry" />
        <SalaryFilter v-if="isSalary" />
        <MoreFilter v-if="isMore" />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { getCurrentInstance, nextTick, onMounted, reactive, ref } from 'vue'
  import AreaFilter from './area-filter.vue'
  import IndustryFilter from './industry-filter.vue'
  import SalaryFilter from './salary-filter.vue'
  import MoreFilter from './more-filter.vue'
  import { FilterType, useFiterType } from './useFilterType'
  import { genRandomId, getNodeRect } from '@/utils/utils'

  const vm = getCurrentInstance()

  const viewId = genRandomId('filterView')

  const offsetTop = ref(0)

  const popupState = reactive({
    visible: false,
    open: false,
  })

  const {
    isArea,
    isIndustry,
    isSalary,
    isMore,
    setType,
  } = useFiterType()

  const openPopup = (type: FilterType) => {
    setType(type)

    popupState.visible = true

    setTimeout(() => {
      popupState.open = true
    }, 100)
  }

  const closePopup = () => {
    popupState.open = false

    setTimeout(() => {
      popupState.visible = false
    }, 300)
  }

  const togglePopup = (type: FilterType) => {
    if (popupState.visible && popupState.open) closePopup()

    if (!popupState.visible && !popupState.open) openPopup(type)
  }

  const getDomRect = () => {
    getNodeRect(`#${viewId}`, vm).then((rect) => {
      offsetTop.value = rect.top! + rect.height!
    })
  }

  onMounted(() => {
    nextTick(getDomRect)
  })
</script>

<style lang="scss" scoped>
	.filter-view {
		position: relative;
		height: 86rpx;
		&.border {
			&::after {
				content: '';
				box-sizing: border-box;
				pointer-events: none;
				border: 0 solid $border-color-2;
				border-top-width: 1px;
				border-bottom-width: 1px;
				position: absolute;
				top: -50%;
				right: -50%;
				bottom: -50%;
				left: -50%;
				transform: scale(.5);
			}
		}
	}

	.line {
		height: 50rpx;
		margin: 0 16rpx;
		border-left: 1rpx solid #ECECEC;
	}

	.filter-popup {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		overflow: hidden;
		&__mask,
		&__body {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			opacity: 0;
			transition-duration: 300ms;
			&.open {
				opacity: 1;
			}
		}
		&__mask {
			bottom: 0;
			background-color: rgba(#000, 0.6);
		}
		&__body {
			border-radius: 0 0 10rpx 10rpx;
			overflow: hidden;
			transform: translateY(-100%);
			&.open {
				transform: translateY(0);
			}
		}
	}
</style>
